.indicator {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
  background-size: calc(100% + 20px) calc(100% - 100vh + 5px);
  pointer-events: none;
  mix-blend-mode: darken;
}
.indicator::after {
  content: "";
  position: fixed;
  top: 5px;
  bottom: 0;
  inset-inline: 0;
  background: #fff;
  z-index: 1;
}

.transparentSquare {
  display: inline-block;
  padding: 300px;
  background-color: #fff;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

.flow-twill {
  padding-right: 30%;
  height: 28.284px;
  background: repeating-linear-gradient(45deg, teal, teal 10px, transparent 11px, transparent 19px, teal 20px);
  background-clip: content-box;
  animation: twill 1s linear infinite;
  position: relative;
}
.flow-twill::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), hsla(0, 0%, 100%, 0.5), rgba(0, 0, 0, 0.5));
}

@keyframes twill {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -56.568px;
  }
}
.changeFontSizebox span {
  font-size: 40px;
}
.changeFontSizebox span:first-child:nth-last-child(n+13), .changeFontSizebox span:first-child:nth-last-child(n+13) ~ span {
  font-size: 30px;
}
.changeFontSizebox span:first-child:nth-last-child(n+17), .changeFontSizebox span:first-child:nth-last-child(n+17) ~ span {
  font-size: 20px;
}
.changeFontSizebox span:first-child:nth-last-child(n+25), .changeFontSizebox span:first-child:nth-last-child(n+25) ~ span {
  font-size: 14px;
}

html {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
*:before, *:after {
  box-sizing: inherit;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  position: relative;
}

.wrapper {
  overflow: hidden;
  width: 800px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
.wrapper p {
  font-size: 1.5rem;
  line-height: 1.5;
  text-indent: 2em;
}
.wrapper p:hover span {
  background-position: left bottom;
  background-size: 100% 2px;
}
.wrapper p span {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  background-repeat: no-repeat;
  background-size: 0 2px;
  background-position: right bottom;
  transition: background-size 1s ease-in-out;
}
.wrapper .wonder {
  margin: 0;
  margin-top: 30px;
  padding-left: 0;
  list-style-type: none;
  color: #eee;
  box-shadow: 0 0.6px, 0 -0.6px;
  -webkit-text-fill-color: #333;
  cursor: pointer;
}
.wrapper .wonder li {
  line-height: 2.75rem;
  padding-left: 1rem;
  background-color: #fff;
  isolation: isolate;
  position: relative;
}
.wrapper .wonder li:not(:last-child)::after {
  content: "";
  display: block;
  border-top: 1px solid;
  transform: scaleY(0.51);
  margin-top: -1px;
}
.wrapper .wonder li [type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  all: initial;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.wrapper .wonder li [type=radio]:checked {
  color: #009ff1;
}
.wrapper .wonder li [type=radio]:checked::before, .wrapper .wonder li [type=radio]:checked::after {
  content: "";
  position: absolute;
}
.wrapper .wonder li [type=radio]:checked::before {
  top: 0;
  bottom: 0;
  right: 1rem;
  width: 0.6125rem;
  height: 0.325rem;
  margin: auto;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
}
.wrapper .wonder li [type=radio]:checked::after {
  inset: 0;
  background-color: currentColor;
  mix-blend-mode: lighten;
}
.wrapper .wonder li [type=radio]:active {
  background: linear-gradient(rgba(187, 187, 187, 0.0666666667), rgba(187, 187, 187, 0.0666666667));
}
.wrapper #target {
  color: gray;
}
.wrapper img {
  width: 128px;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
  vertical-align: bottom;
}
.wrapper img.error {
  display: inline-block;
  transform: scale(1);
}
.wrapper img.error::before, .wrapper img.error::after {
  position: absolute;
  left: 0;
  width: 100%;
}
.wrapper img.error::before {
  content: "";
  top: 0;
  height: 100%;
  color: transparent;
  background: #f5f5f5 url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M304.128 456.192c48.64 0 88.064-39.424 88.064-88.064s-39.424-88.064-88.064-88.064-88.064 39.424-88.064 88.064 39.424 88.064 88.064 88.064zm0-116.224c15.36 0 28.16 12.288 28.16 28.16s-12.288 28.16-28.16 28.16-28.16-12.288-28.16-28.16 12.288-28.16 28.16-28.16z' fill='%23e6e6e6'/%3E%3Cpath d='M887.296 159.744H136.704C96.768 159.744 64 192 64 232.448v559.104c0 39.936 32.256 72.704 72.704 72.704h198.144L500.224 688.64l-36.352-222.72 162.304-130.56-61.44 143.872 92.672 214.016-105.472 171.008h335.36C927.232 864.256 960 832 960 791.552V232.448c0-39.936-32.256-72.704-72.704-72.704zm-138.752 71.68v.512H857.6c16.384 0 30.208 13.312 30.208 30.208v399.872L673.28 408.064l75.264-176.64zM304.64 792.064H165.888c-16.384 0-30.208-13.312-30.208-30.208v-9.728l138.752-164.352 104.96 124.416-74.752 79.872zm81.92-355.84l37.376 228.864-.512.512-142.848-169.984c-3.072-3.584-9.216-3.584-12.288 0L135.68 652.8V262.144c0-16.384 13.312-30.208 30.208-30.208h474.624L386.56 436.224zm501.248 325.632c0 16.896-13.312 30.208-29.696 30.208H680.96l57.344-93.184-87.552-202.24 7.168-7.68 229.888 272.896z' fill='%23e6e6e6'/%3E%3C/svg%3E") no-repeat center/50% 50%;
}
.wrapper img.error::after {
  content: attr(alt);
  bottom: 0;
  line-height: 2;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

ui-overlay {
  position: absolute;
  background: red;
  mix-blend-mode: overlay;
  isolation: isolate;
  z-index: 9;
}

.space {
  width: 100%;
  height: 1000px;
  color: gray;
  background-color: goldenrod;
  text-align: center;
  border: 1px dotted;
}
.space::before {
  content: "";
  line-height: 666px;
}